<template>
	<view>
		<view class="content">
			<view class="span">

			</view>
			<view class="span1">
				<view class="head">
					<view class="box">
						<image class="img1" src="../../static/zonghe/left-1.png"></image>
					</view>
					<view class="title1">
						员工招募
					</view>
					<view class="box">
					</view>
				</view>

				<view class="text">
					<view class="tit">
						讲师
					</view>
					<view class="money">
						170.00/天
					</view>
					<view class="tag">
						昌平 | 送餐员
					</view>
				</view>
			</view>
		</view>
		<!-- 招聘要求 -->
		<view class="row1 in">
			<view class="tit">
				招聘要求
			</view>
			<view class="tag">
				<view class="list">
					月结
				</view>
				<view class="list">
					招30人
				</view>
				<view class="list">
					男女不限
				</view>
			</view>
		</view>
		<!-- 工资福利 -->
		<view class="row2 in">
			<view class="title">
				工作福利
			</view>
			<view class="lists">
				<view class="list">
					<view class="img1">
						<image class="img" src="../../static/zonghe/icon-2.png" mode=""></image>
					</view>
					<view class="txt">
						免费培训
					</view>
				</view>

			</view>
		</view>
		<!-- 工作内容 -->
		<view class="row3 in">
			<view class="title">
				工作内容
			</view>
			<view class="text">
				<view class="txt">
					工资待遇:无责150/天+派单提成(1单1-2元),每天综合到手工资160-170,公司免费提供车辆,无需押金
				</view>
				<view class="txt">
					岗位要求:18-40,会骑电动车,会熟练操作智能手机,服从管理,有服务安全意识。
				</view>
				<view class="txt">
					工作时间:1200-21:00(中间休息一小时)固定班次上六休一从现在起至少工作到2月8号。
				</view>
				<view class="txt">
					工作内容:对顾客在app上下单的酒水饮料进行装车并骑车安全的把商品配送到顾客手里。
				</view>
				<view class="txt">
					工资结算:每个月15号结算上个月工资(统一中国农
					业银行卡)
				</view>
				<view class="txt">
					工作地点:北京五环内就近分配
				</view>
			</view>
		</view>
		<!-- 工作时间 -->
		<view class="row4">
			<view class="title">
				工作时间
			</view>
			<view class="time">
				<view class="left">
					<view class="txt">
						开始时间：
					</view>
					<view class="txt">
					</view>
					<view class="txt">
						结束时间：
					</view>
				</view>
				<view class="next">
					<view class="txt">
						<view class="span">

						</view>
					</view>
					<view class="txt">
						<view class="span1">

						</view>
					</view>
					<view class="txt">
						<view class="span">

						</view>
					</view>
				</view>
				<view class="right">
					<!-- 开始时间 -->
					<view class="txt">
						2019-12-12
					</view>
					<!-- 工作时间 -->
					<view class="txt span">
						12:00-21:00
					</view>
					<!-- 结束日期 -->
					<view class="txt">
						2020-02-08
					</view>
				</view>
			</view>
		</view>

		<!-- 工作地址 -->
		<view class="row5 in">
			<view class="title">
				工作地址
			</view>
			 <view class="page-body">
			            <view class="page-section page-section-gap">
			                <map style="width: 100%; height:140rpx;" :latitude="latitude" :longitude="longitude" :markers="covers">
			                </map>
			            </view>
			        </view>
		</view>
		<!-- 机构信息 -->
		<view class="row6 in">
			<view class="title">
				机构信息
			</view>
			<view class="msg">
				<view class="image">
				<image class="img1" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
				</view>
				<view class="name">
					联系人：韩经理
				</view>
				<view class="image">
					<image class="img2"  src="../../static/icon/iconRight.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 可能你喜欢 -->
		<view class="row7 in">
			<view class="title">
				可能你喜欢
			</view>
			<view class="text">
					<view class="left">
						<view class="tit">
							日结190/天管住东东仓储分拣员
						</view>
						<view class="txt">
							北京XXX科技发展有限公司
						</view>
						<view class="tag">
							<view class="list">
								朝阳/19.8km
							</view>
						</view>
						
					</view>
					<view class="right">
						<view class="money">
							190/天
						</view>
						<view class="txt">
						日结
						</view>
					</view>
				</view>
		</view>
		<!--  -->
		<view class="span">
			已经到底了
		</view>
		<!-- 底部-->
		<view class="footer">
			<view class="zx">
				<view class="image">
					<image class="img" src="../../static/zonghe/zx.png" mode=""></image>
				</view>
				<view class="txt">
					咨询
				</view>
			</view>
			<view class="fx">
				<view class="tit">
					分享岗位
				</view>
				<view class="txt">
					分享可获得录用优先
				</view>
			</view>
			<view class="bm">
				<view class="tit">
					我要报名
				</view>
				<view class="txt">
					25人已报名
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}]
			}
		}
	}
</script>

<style lang="scss">
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	page {
		background-color: #F5F5F5;
	}

	.in {
		width: 95%;
	}

	.content {
		background-image: url(../../static/zonghe/bgc1.png);
		background-size: cover;
		background-color: #fff;
		overflow: hidden;
		position: relative;

		.span {
			width: 100%;
			height: 280rpx;
			// background-color:rgba(0, 0, 0, .3);
			position: absolute;
			top: 0;
			z-index: 1;
		}

		.span {}

		.text {
			background-color: rgba(0, 0, 0, .6);
			padding: 0 30rpx;
			color: #FFFFFF;
			padding-bottom: 30rpx;

			.tit {
				font-size: 36rpx;
			}

			.money {
				color: rgba(251, 141, 50, 100);
				font-size: 36rpx;
				margin: 10rpx 0;
			}

			.tag {
				font-size: 26rpx;
				margin: 10rpx 0;
			}
		}

	}

	.head {
		background-color: rgba(0, 0, 0, .6);
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;

		.title1 {
			font-weight: 700;
			font-size: 16px;
			line-height: 100rpx;
			text-align: center;
			overflow: hidden;
			color: #fff;
		}

		.box {
			margin: auto 0;
			margin-top: 15rpx;
			width: 50rpx;
			height: 50rpx;
		}

		.img1 {
			margin: 0 auto;
			width: 50rpx;
			height: 50rpx;
		}

		.img2 {
			margin-top: 10rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}

	.row1 {
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;

		.tit {
			color: #999;
			font-size: 24rpx;
		}

		.tag {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.list {
				border-radius: 4rpx;
				background-color: rgba(255, 255, 255, 100);
				color: rgba(251, 141, 50, 100);
				font-size: 28rpx;
				text-align: center;
				font-family: Arial;
				border: 2rpx solid rgba(251, 141, 50, 100);
				margin-right: 10rpx;
				padding: 2rpx 15rpx;
			}
		}
	}

	.title {
		position: relative;
		padding-left: 30rpx;
		line-height: 44rpx;
	}

	.title::before {
		content: '';
		position: absolute;
		width: 8rpx;
		height: 44rpx;
		background-color: #FB8D32;
		left: 0rpx;
	}

	.title::after {
		content: '';
		position: absolute;
		width: 70%;
		height: 2rpx;
		background-color: #bbb;
		top: 0;
		bottom: 0;
		left: 25%;
		margin: auto;
	}

	.row2 {
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx;

		.lists {
			display: flex;
			flex-wrap: wrap;

			.list {
				margin-top: 20rpx;
				width: 120rpx;
				text-align: center;

				.img1 {
					margin: auto;
					width: 80rpx;
					height: 80rpx;
				}

				.txt {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: rgba(16, 16, 16, 100);
				}
			}
		}
	}

	.row3 {
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx;

		.text {
			margin: 10rpx;
			color: rgba(16, 16, 16, 100);
			font-size: 28rpx;
			text-align: left;

			.txt {
				margin: 40rpx 10rpx;
			}
		}
	}

	.row4 {
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx;

		.time {
			display: flex;
			margin-top: 20rpx;

			.left {
				.txt {
					height: 50rpx;
					opacity: 0.35;
					color: rgba(16, 16, 16, 100);
					font-size: 28rpx;
					text-align: left;
					margin: 5rpx 0;
				}
			}

			.right {
				margin-left: 10rpx;

				.txt {
					height: 50rpx;
					font-size: 28rpx;
					text-align: left;
					margin: 5rpx 0;
					color: #000;
				}

				.span {
					opacity: 0.35;
					color: rgba(16, 16, 16, 100);
				}
			}

			.next {
				.txt {
					height: 50rpx;
					font-size: 28rpx;
					text-align: left;
					margin: 7rpx 5rpx;
					color: #000;
					position: relative;
				}

				.span {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					border: 10rpx solid #FB8D32;
					margin: auto;
				}

				.span1 {
					width: 1rpx;
					height: 60rpx;
					border: 2rpx solid #FB8D32;
					margin: auto;
					position: absolute;
					top: -15rpx;
					left: 13rpx;
				}
			}
		}

	}

	.row5 {
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx;
	}
	.row6 {
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx;
		.msg{
			margin-top: 30rpx;
			background-color: #F3F3F3;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}
		.image{
			margin: auto 0;
		}
		.name{
			width: 70%;
			line-height: 70rpx;
			color: #999;
		}
		.img1{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.img2{
			width: 15rpx;
			height: 25rpx;
		}
	}
	.row7{
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx;
		.text{
			display: flex;
			margin: 20rpx;
			.left{
				width: 80%;
				.tit{
					font-size: 36rpx;
					font-weight: 550;
							overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
				}
				.txt{
					margin: 20rpx 0;
					color: #999;
					font-size: 24rpx;
				}
				.tag{
					display: flex;
					.list{
						padding:5rpx 20rpx;
						border-radius: 8rpx;
						background-color: rgba(235, 235, 235, 100);
						color: rgba(186, 186, 186, 100);
						font-size: 12px;
						text-align: center;
						font-family: Arial;
						border: 1px solid rgba(255, 255, 255, 100);
					}
				}
			}
			.right{
				width: 20%;
				.money{
					font-weight: 550;
					text-align: right;
					font-size: 36rpx;
					color: #FB8D32;
				}
				.txt{
					margin: 20rpx 0;
					font-size: 24rpx;
					color: #999;
					text-align: right;
				}
			}
		}
	}
	.span{
		text-align: center;
		color: #999;
		height: 200rpx;
	}
	.footer{
		display: flex;
		height: 100rpx;
		width: 100%;
		margin:  auto;
		position: fixed;
		bottom: 0;
		.zx{
			width: 30%;
			background-color: #fff;
			display: flex;
			.txt{
				line-height: 100rpx;
				color: #FB8D32 ;
				margin-left: 10rpx;
				font-size: 32rpx;
			}
			.image{
				margin: auto 0;
				margin-left: 50rpx;
				width:36rpx ;
				height: 36rpx;
			}
		}
		.tit{
			color: #FFFFFF;
			font-size: 36rpx;
			margin: 5rpx 0;
		}
		.txt{
			opacity: 0.63;
			color: rgba(255, 255, 255, 100);
			font-size: 24rpx;
		}
		.fx{
			width: 35%;
			background-color: #B18268;
			text-align: center;
			padding: 5rpx;
			
		}
		.bm{
			width: 35%;
			padding: 5rpx;
			background-color: #FF7313;
			text-align: center;
		}
	}
</style>
